<template>
	<view class="wrap">

		<!-- {{parm}} -->

		<view class="u-p-t-80 u-p-l-30 u-p-r-30" v-if="showSearch">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item label="手机号码" prop="StaffMobile" label-width="150">
					<view class="text-area" style="display: flex; align-items: center; font-size: 12px; width: 100%;">
						<view style="flex: 1;">
							<!-- <u-input @blur="PhoneBlur" placeholder="请输入电话号码" v-model="model.StaffMobile" type="number">
							</u-input> -->
							<u-input placeholder="请输入电话号码" v-model="model.StaffMobile" type="number">
							</u-input>
						</view>
					</view>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="验 证 码" prop="SmsCode" label-width="128">
					<u-input maxlength="4" placeholder="请输入验证码" v-model="model.SmsCode" type="text">
					</u-input>
					<!-- <u-button :disabled="!canSend" slot="right" type="primary" size="mini" @click="getCode">{{codeTips}}
					</u-button> -->
					<u-button  slot="right" type="primary" size="mini" @click="getCode">{{codeTips}}
					</u-button>
				</u-form-item>



			</u-form>

			<u-button shape="circle" @click="submit" class="u-m-t-40" type="primary"> 提交 </u-button>


			<u-verification-code endText="获取验证码" startText="获取验证码" seconds="60" ref="uCode" @change="codeChange">
			</u-verification-code>
		</view>

		<view v-else class="list">
			
			<view v-if="lists.length">
				<view v-for="item in lists">
					<!-- {{item}} -->
					
					<view class="li"  v-if="item.productId==1">
						<div class="cardBox">
							<div class="nameAndSign">
								<div class="name_shadow">瑞享延年优享 个人卡</div>
					
							</div>
							<div class="timeBox">
								<div class="timeTxt">有效期</div>
								<div class="timeVal">购买后365天内有效</div>
							</div>
					
					
							<div @click="writeinfo(1,item.orderNo)" class="buyBtn J_buyBtn">完善个人信息</div>
						</div>
					</view>
					
					
					<view v-else class="li li1">
						<div class="cardBox">
							<div class="nameAndSign">
								<div style="color: #f2dbb4; opacity: 1;" class="name_shadow">瑞享延年优享 家庭卡</div>
					
							</div>
							<div class="timeBox">
								<div class="timeTxt">有效期</div>
								<div class="timeVal">购买后365天内有效</div>
							</div>
							
							<div @click="writeinfo(2,item.orderNo)" class="buyBtn J_buyBtn">完善家庭信息</div>
						</div>
					</view>
					
				</view>
				
				
			</view>
			<view v-else style="padding: 200rpx 0 100rpx 0;" >
				<u-empty text="暂无订单" mode="order"></u-empty>
			</view>
			

		</view>
		<foo />

	</view>
</template>
<script>
	import foo from "../msg/footer.vue";
	export default {
		components: {
			foo
		},
		props: ['parm', 'mobile'],
		data() {
			let that = this;
			return {
				lists:[],
				showSearch: false,
				canSend: false,
				codeTips: '',
				model: {
					StaffMobile: "",
					StaffMobileFix: '0086',
					SmsCode: '',


				},

				rules: {


					StaffMobile: [{
							required: true,
							message: '请输入电话号码',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '电话号码输入有误',
							trigger: ['change', 'blur']
						}
					],
					SmsCode: [{
							required: true,
							message: '请输入验证码',
							trigger: ['change', 'blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change', 'blur'],
						}
					],




				},
				border: true,
				selectShow: false,

				labelPosition: 'left',

				errorType: ['message'],
			};
		},
		mounted() {
			// 获取产品列表
		
			this.getlist()

		},
		computed: {
			borderCurrent() {
				return this.border ? 0 : 1;
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			
			getlist(){
				this.$u.api.getOrderList()
					.then(res => {
						console.log(res.code, 88888888);
						if(res.code==401){
								this.showSearch = true
						}else{
							this.showSearch = false
							this.lists = res.data
						}
					});
			},
// 'orderUserId', 'mobile'
			// smsCodeLogin
			writeinfo(type,orderNo) {
				uni.navigateTo({
					url: "/pages/sys/workbench/form?type=" + type+'&orderNo='+orderNo+'&parm='+this.parm
				})

			},
			PhoneBlur(e) {
				console.log(e, 77777777)

				this.$u.api.sendSmsCode({
						mobile: e
					})
					.then((res) => {
						this.$u.toast(res.msg);
						if (res.code == '200') {
							// this.canSend = true

						} else {
							// this.canSend = false
							this.$u.toast(res.msg);
						}
					});
			},
			upDataCountryCode: function(msg) {
				if (msg) {
					this.model.StaffMobileFix = msg;
				}
				this.$forceUpdate();
			},

			gotoPickcode() {

				uni.navigateTo({
					url: "/pages/login/code/country-code"
				})

			},
			codeChange(text) {
				this.codeTips = text;
			},


			getCode() {


				if (this.$refs.uCode.canGetCode) {

					if (!this.model.StaffMobile) {
						this.$u.toast('手机号不能为空');
						return
					}

					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码',
						mask: true
					})
					
					
					
					this.$u.api.sendSmsCode({
							mobile: this.model.StaffMobile
						})
						.then((res) => {
							
							if (res.code == '200') {
								uni.hideLoading(); // 这里此提示会被this.start()方法中的提示覆盖
								this.$u.toast('验证码已发送'); // 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							
							} else {
								this.$u.toast(res.msg); // 通知验证码组件内部开始倒计时
								console.log("请求数据失败");
							}
						});

					

				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},

			submit() {
				if (!this.model.StaffMobile) {
					this.$u.toast('手机号不能为空');
					return
				}

				if (!this.model.SmsCode) {
					this.$u.toast('验证码不能为空');
					return
				}
				this.$refs.uForm.validate(valid => {
					if (valid) {

						// 账户登录
						this.$u.api.smsCodeLogin({
								mobile: this.model.StaffMobile,
								smsCode: this.model.SmsCode
							})
							.then(res => {
								// 登入成功
								this.$u.toast(res.msg);
								if (res.code == 200) {
									
									this.$u.vuex("vuex_token", res.data.token);
									this.getlist()
									// this.$u.vuex("vuex_info", res.data);
									// uni.reLaunch({
									// 	url: "/pages/login/index"
									// })
								} else {
									this.$u.toast(res.msg);
								}



							});


					} else {
						console.log('验证失败');
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #F0F1F2;

	}

	.lists {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 20rpx 16rpx;
	}

	.list {
		margin: 0 30rpx;

		.li {
			margin: 0 auto;
			width: 100%;
			height: 300rpx;
			background: url('../../../static/img/img4.png') no-repeat;
			background-size: cover;
			border-radius: 20rpx;
			box-shadow: 0 15rpx 20rpx 0 rgba(51, 51, 51, .12);
			position: relative;


			.cardBox {
				margin-bottom: 20px;
			}

			.cardBox .nameAndSign {
				align-items: baseline;
				display: flex;
				left: 20px;
				position: absolute;
				top: 15px
			}


			.cardBox .nameAndSign .name_shadow,
				{
				font-size: 23px;
				font-weight: bolder;
			}

			.cardBox .nameAndSign .name_shadow {
				color: #fff;
				opacity: 0.7;
				text-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
			}

			.cardBox .nameAndSign .sign {
				background: #000;
				border-radius: .34rem;
				color: #fff;
				display: inline-block;
				font-size: .43rem;
				height: .68rem;
				line-height: .68rem;
				margin-left: .32rem;
				opacity: .5;
				text-align: center;
				vertical-align: text-top;
				width: 1.75rem
			}

			.cardBox .timeBox {
				bottom: 20px;
				color: #fff;
				font-size: 13px;
				left: 20px;
				opacity: .7;
				position: absolute
			}

			.cardBox .priceBox {
				color: #fff;
				position: absolute;
				right: 20px;
				top: 50px
			}

			.cardBox .priceBox .priceSign {
				display: inline-block;
				font-size: 14px;
				vertical-align: text-bottom
			}

			.cardBox .priceBox .priceVal {
				display: inline-block;
				font-size: 20px;

				vertical-align: baseline
			}

			.cardBox .priceBox_shadow {
				color: #fff;
				opacity: 0.7;
				text-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
				position: absolute;
				right: 20px;
				top: 40px
			}

			.cardBox .priceBox_shadow .priceSign {
				display: inline-block;
				font-size: 14px;

				vertical-align: text-bottom
			}

			.cardBox .priceBox_shadow .priceVal {
				display: inline-block;
				font-size: 30px;
				vertical-align: baseline
			}

			.cardBox .buyBtn {
				background: rgba(0, 0, 0, .5);
				border-radius: 40px;
				bottom: 20px;
				color: #fff;
				font-size: 13px;
				// padding: 2px 12px;
				position: absolute;
				right: 20px;
				padding: 0 10px;
				// width: 80px;
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				font-weight: bold;
				background: #f3e5cc;
				color: #775324;
				animation: pulse 1s infinite;

			}

			@keyframes pulse {
				0% {
					transform: scale(1);
					// box-shadow: 0 0 0 0 rgba(157, 104, 34, 0.7);
				}

				70% {
					transform: scale(1.1);
				}

				// box-shadow: 0 0 10px 10px rgba(157, 104, 34, 0.7);
				100% {
					transform: scale(1);
					// box-shadow: 0 0 0 0 rgba(157, 104, 34, 0.7);
				}
			}

			.cardBox .rightIco {
				bottom: 1rem;
				color: #fff;
				font-size: .5rem;
				height: .43rem;
				line-height: .43rem;
				opacity: .8;
				position: absolute;
				right: .92rem;
				text-align: center
			}

			.rightsBox .titleBox {
				font-size: 0;
				height: .64rem;
				line-height: 0;
				margin-top: 1.28rem;
				position: relative
			}

			&.li1 {
				background: url("../../../static/img/cardBg3.png");
				background-size: cover;
			}

			&.li2 {
				background: linear-gradient(#12b0f8, #4283eb);

				.buyBtn {
					// background: rgba(0, 0, 0, .5);
					// border-radius: 40px;
					// bottom: 20px;
					// color: #fff;
					// font-size: 13px;
					// // padding: 2px 12px;
					// position: absolute;
					// right: 20px;
					// width: 80px;
					// height: 35px;
					// display: flex;
					// align-items: center;
					// justify-content: center;
					// text-align: center;
					// font-weight: bold;

					// background: url('../../../static/img/buyBtn1.png') no-repeat;
					// background-size: cover;
					color: #926120;
					animation: pulse 1s infinite;

					background: #f3e5cc;
					color: #775324;

				}
			}


		}

	}



	.listitem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #E8E8E8;
		padding: 20rpx 30rpx;

		&:last-child {
			border-bottom: none;
		}

		.left {
			flex: 1;
		}

		.btn {
			width: 50px;
			width: 129rpx;
			height: 52rpx;
			background: linear-gradient(#12b0f8, #4283eb);
			border-radius: 35rpx 35rpx 35rpx 35rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 28rpx;
		}

		.top {
			.name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #343434;
				line-height: 33rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}

		.code {
			margin-top: 15rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #343434;
			line-height: 33rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.time {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}
	}


	.forget,
	.register {
		text-align: center;
		color: #b5b5b5;
		width: 100%;
		font-size: 13px;
		padding: 40px 0;

		text {
			color: #4283eb;
		}
	}



	.agreement {
		display: flex;
		align-items: center;
		margin: 40rpx 0;

		.agreement-text {
			color: $u-tips-color;
		}

		/deep/ .u-checkbox__label {
			margin-right: 0;
			font-size: 24rpx;
			color: #AAAAAA;
		}


	}

	.u-link {

		margin: 0 10rpx;
		font-size: 24rpx !important;
	}

	.forgetAcount {
		padding-right: 50px;
	}

	.logo {
		padding: 60px 0 20px 0;
		text-align: center;
	}


	.login-bottom-box {
		position: fixed;
		bottom: 40rpx;
		text-align: center;
		width: 100%;
		left: 0;

	}

	.copyright {
		text-align: center;
		color: #939393;
		width: 100%;
		font-size: 24rpx;

		.u-link {
			margin: 0 10rpx;
			font-size: 24rpx !important;
		}
	}
</style>
